<template>
    <view class="unobstructed-popup" :class="[popupDirectionClass, popupExpandToggleClass]"
        :style="{ 'width': width, 'height': height }">
        <view class="popup-body">
            <slot name="body"></slot>
        </view>
        <view class="expand-toggle" @click="handleExpandToggle" :style="{ mode: width }">
            <u-icon class="expand-toggle-icon" :name="expandToggleStatus ? 'play-right-fill' : 'play-left-fill'"></u-icon>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        mode: {
            type: String,
            default: 'right',
            validator(value) {
                return ['right', 'left', 'top', 'bottom'].includes(value);
            }
        },
        width: {
            type: [String, Number],
            default: '55%'
        },
        height: {
            type: [String, Number],
            default: '100%'
        }
    },
    data() {
        return {
            expandToggleStatus: true
        }
    },
    computed: {
        popupDirectionClass() {
            return `popup-mode-${this.mode}`
        },
        popupExpandToggleClass() {
            return this.expandToggleStatus ? 'put-away' : ''
        },
        expandTogglePostion() {
            const position = this.mode
            return { [position]: this.width }
        }
    },
    methods: {
        handleExpandToggle() {
            this.expandToggleStatus = !this.expandToggleStatus
        }
    }
}
</script>
<style scoped lang="scss">
.unobstructed-popup {
    z-index: 2000;
    position: absolute;
    background-color: #fff;
    box-shadow: 4rpx 0 14rpx #000;
    transition: 0.5s;
    $mode-direction: right, bottom, left, top;

    .popup-body {
        padding: 56rpx;
        padding-top: 20rpx;
        height: 100%;
    }

    .expand-toggle {
        position: absolute;
        display: flex;
        align-items: center;
        z-index: 2001;
        font-size: 28px;
    }

    @for $i from 1 through length($mode-direction) {
        $item : nth($mode-direction, $i);

        &.popup-mode-#{$item} {

            &.put-away {
                transform: translateZ(0) !important
            }
        }

        &.popup-mode-#{$item} {
            $translate-value: calc(100% - 56rpx);
            $direction-index: index($mode-direction, $item);
            $x: if($item ==right, $translate-value, if($item ==left, calc(-1 * #{$translate-value}), 0));
            $y: if($item ==bottom, $translate-value, if($item ==top, calc(-1 * #{$translate-value}), 0));
            transform: translate3d($x, $y, 0);

            .expand-toggle-icon {
                $num: $i - 1;
                $deg: 90deg * $num;
                transform: rotate($deg);
                content: $deg;
            }
        }

        @if $item ==top or $item ==bottom {
            &.popup-mode-#{$item} {
                #{$item}: 0;
                height: if($item ==left or $item ==right, 100%, 50%);
            }
        }

        @else if $item ==left or $item ==right {
            &.popup-mode-#{$item} {
                height: 100%;
                top: 0;
                #{$item}: 0;
            }
        }

        @if $item ==top or $item ==bottom {
            $flag: $item==bottom;
            $item-reverse: if($flag, top, bottom);

            &.popup-mode-#{$item} {
                .expand-toggle {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    #{ $item-reverse}: 0;
                    width: 100%;
                    content: $item-reverse;
                }
            }
        }

        @if $item ==left or $item ==right {
            $flag: $item==right;
            $item-reverse: if($flag, left, right);

            &.popup-mode-#{$item} {
                .expand-toggle {
                    top: 0;
                    height: 100%;
                    #{ $item-reverse}: 0;
                }
            }
        }
    }
}
</style>